<template>
    <div>
        <!-- {{ 表达式 }} -->
        <!-- 表达式： 能够产生值 -->
        <h3>{{ 1 + 1 }}</h3>
        <h1>{{ feel }}</h1>
        <button @click="change">改变</button>
        <h1>{{ mileage }}</h1>
        <button @click="add">增加</button>
        <ul>
            <li v-for="item in killList">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
// 两个响应式Api:
// ref(任意数据类型)： 逻辑中操作需要通过.value去操作,模板中直接去使用即可，因为会自动解包
// reactive(数组/对象)
// ref创建的数据可以覆盖，但reactive创建的值不能覆盖
import { ref } from 'vue'
const feel = ref('like')
const change = () => {
    feel.value = 'love'
}
const mileage = ref(['2km','3km','4km','5km'])
const killList = ref(['孙笑川','小猫cook','丽丽','云凌'])
const add = () => {
    mileage.value.push('10km')
    killList.value.push('藤化元')
}
</script>
